<template>
  <div class="wrap">
    <div class="tips" v-if="$store.state.session.user.type === 'agent'">{{$t('monitor.tips')}}</div>
    <affix :label="$t('monitor.callOverview')" style="margin-top: 36px;">
      <el-row>
        <el-col :span="12" class="callsum-wrap">
          <div class="callsum">{{$t('monitor.todayIncomingNum')+ '：'+ phoneAccountCalls.inCalls}}</div>
          <highcharts :options="optionsCallin"></highcharts>
        </el-col>
        <el-col :span="12" class="callsum-wrap">
          <div class="callsum">{{$t('monitor.todayOutboundNum')}}：{{phoneAccountCalls.outCalls}}</div>
          <highcharts :options="optionsCallout"></highcharts>
        </el-col>
      </el-row>
    </affix>
    <affix :label="$t('monitor.callHeartChart')">
      <div class="heart-wrap">
        <div>
          <span class="heart-num active">{{heartChartData.incomingData||0}}</span>
          <span class="heart-name active">{{$t('public.callIn')}}</span>
        </div>
        <div>
          <span class="heart-num">{{heartChartData.incomingCompleteData||0}}</span>
          <span class="heart-name">{{$t('monitor.callIncoming')}}</span>
        </div>
        <div>
          <span class="heart-num">{{heartChartData.queueData||0}}</span>
          <span class="heart-name">{{$t('monitor.listing')}}</span>
        </div>
        <div>
          <span class="heart-num">{{heartChartData.outboundData||0}}</span>
          <span class="heart-name">{{$t('public.callOut')}}</span>
        </div>
        <div>
          <span class="heart-num">{{heartChartData.outboundCompleteData||0}}</span>
          <span class="heart-name">{{$t('monitor.callOut')}}</span>
        </div>
      </div>
      <highcharts :options="monitorHeartChart" v-if="reload"></highcharts>
      <!--<div id="monitorHeartChart"></div>-->
    </affix>
    <affix :label="$t('monitor.top10list')">
      <agent-top10></agent-top10>
    </affix>
    <affix :label="$t('monitor.serviceNumberProportionAnalysisChart')">
      <div>
        <div class="clear10"></div>
        <div class="chart-tip fr" ><span class="color-sum circle fl">&nbsp;&nbsp;</span>{{$t('monitor.totalCall')}}<span class="ratio">{{$t('monitor.callRatio')}}</span></div>
        <div class="chart-tip fr"><span class="color-complete circle fl">&nbsp;&nbsp;</span>{{$t('monitor.connetcCallNum')}}</div>
        <div class="clear10"></div>
      </div>
      <div v-for="item in phoneServiceNos" class="server" :key="item.serviceNo">
        <el-row :gutter="20">
          <el-col :span="5" class="a">{{$t('monitor.serviceNum')}}: &nbsp;&nbsp;{{item.serviceNo}}<span></span></el-col>
          <el-col :span="14">
            <el-progress :text-inside="true" :stroke-width="7" :percentage="item.perInComplete > 100 ? 100 : item.perInComplete" :show-text="bol"></el-progress>
          </el-col>
          <el-col :span="5" class="all">{{item.perDisplay + '  (' + item.perInComplete+ '%)'}}</el-col>
          <div class="clear10"></div>
        </el-row>
      </div>
    </affix>

    <!--<h3 class="title"><span class="sign"></span><span class="text">{{$t('monitor.multiChannelProportionAnalysisChart')}}</span></h3>-->
    <affix :label="$t('monitor.multiChannelProportionAnalysisChart')">
      <div>
        <div class="clear10"></div>
        <div class="chart-tip fr" ><span class="color-sum circle fl">&nbsp;&nbsp;</span>{{$t('monitor.sessionNum')}}<span class="ratio finish">{{$t('monitor.sessionRatio')}}</span></div>
        <div class="chart-tip fr"><span class="color-complete circle fl listen">&nbsp;&nbsp;</span>{{$t('monitor.completeSessionNum')}}</div>
        <div class="clear10"></div>
      </div>
      <div v-for="item in multiChannel" class="channel" :key="item._id">
        <el-row :gutter="20">
          <el-col :span="5" class="a">{{$t('monitor.imAccessId')}}&nbsp;&nbsp;{{item.name}}<span></span></el-col>
          <el-col :span="14">
            <el-progress :text-inside="true" :stroke-width="7" :percentage="item.perInComplete > 100 ? 100 : item.perInComplete" :show-text="bol"></el-progress>
          </el-col>
          <el-col :span="5" class="all">{{item.perDisplay + '  (' + item.perInComplete + '%)'}}</el-col>
          <div class="clear10"></div>
        </el-row>
      </div>
    </affix>

    <!--<h3 class="title"><span class="sign"></span><span class="text">{{$t('monitor.hour24SegmentInboundIcon')}}</span></h3>-->
    <affix :label="$t('monitor.hour24SegmentInboundIcon')">
      <div>
        <div class="clear10"></div>
        <div class="chart-tip fr" ><span class="color-sum circle fl ">&nbsp;&nbsp;</span>{{$t('monitor.inCallSum')}}<span class="ratio">{{$t('monitor.callRatio2')}}</span></div>
        <div class="chart-tip fr"><span class="color-complete24 circle fl">&nbsp;&nbsp;</span>{{$t('monitor.connectedNum')}}</div>
        <div class="clear10"></div>
      </div>
      <el-row>
        <highcharts :options="options24in" v-if="reload"></highcharts>
      </el-row>
    </affix>

    <!--<h3 class="title"><span class="sign"></span><span class="text">{{$t('monitor.hour24SegmentCallIcon')}}</span></h3>-->
    <affix :label="$t('monitor.hour24SegmentCallIcon')">
      <div>
        <div class="clear10"></div>
        <div class="chart-tip fr" ><span class="color-sum circle fl">&nbsp;&nbsp;</span>{{$t('monitor.outCallSum')}}<span class="ratio">{{$t('monitor.outCallRatio')}}</span></div>
        <div class="chart-tip fr"><span class="color-complete24 circle fl">&nbsp;&nbsp;</span>{{$t('monitor.connetcCallNum')}}</div>
        <div class="clear10"></div>
      </div>
      <el-row>
        <highcharts :options="options24out" v-if="reload"></highcharts>
      </el-row>
    </affix>
    <div style="display:none">{{updateheartChart}}</div>
  </div>
</template>
<script>
  import affix from './../../ui-modules/affix/Affix.vue'
  import agentTop10 from './MonitorTop10.vue'
  import Highcharts from 'highcharts'
  function activeLastPointToolip (chart) {
    var points = chart.series[0].points
    if (points.length) {
      chart.tooltip.refresh(points[points.length - 1])
    }
  }
  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  })
  export default {
    name: 'MonitorChart',
    data () {
      let self = this
      return {
        reload: false,
        bol: false,
        currentMaxY: {num: 0, time: new Date().getTime()},
        heartChartLoaded: null,
        heartChartData: {
          incomingData: 0,
          incomingCompleteData: 0,
          queueData: 0,
          outboundData: 0,
          outboundCompleteData: 0
        },
        optionsCallin: {
          chart: {
            type: 'pie',
            style: {overflow: 'visible', width: '100%'},
            animation: false
          },
          credits: {enabled: false},
          tooltip: {
            enabled: false
          },
          plotOptions: {
            pie: {
              center: ['50%', '50%'],
              shadow: false
            },
            series: {animation: false}
          },
          legend: {
            enabled: false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            symbolRadius: 5,
            symbolHeight: 10,
            symbolWidth: 10,
            x: -20,
            y: 0,
            borderWidth: 0,
            width: 140,
            itemStyle: {borderRadius: '50%', fontWeight: '100'},
            floating: false,
            useHTML: true
          },
          title: {
            text: ''
          },
          series: []
        },
        optionsCallout: {
          chart: {
            type: 'pie',
            style: {overflow: 'visible', width: '100%'},
            animation: false
          },
          credits: {enabled: false},
          tooltip: {
            enabled: false
          },
          plotOptions: {
            pie: {
              allowPointSelect: false,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                color: '#4e4e4e'
              },
              showInLegend: true
            },
            series: {animation: false}
          },
          legend: {
            enabled: false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            symbolRadius: 5,
            symbolHeight: 10,
            symbolWidth: 10,
            x: -20,
            y: 0,
            borderWidth: 0,
            width: 140,
            itemStyle: {borderRadius: '50%', fontWeight: '100'},
            floating: false,
            useHTML: true
          },
          title: {
            text: ''
          },
          colors: [
            '#65c3df',
            '#d398e8'
          ],
          series: [{
            type: 'pie',
            data: []
          }]
        },
        options24in: {
          chart: {
            type: 'column',
            animation: false
          },
          xAxis: {
            categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
          },
          yAxis: {
            gridLineColor: '#e6e6e6',
            allowDecimals: false,
            title: {
              text: ''
            }
          },
          title: {
            text: ''
          },
          legend: {
            enabled: false
          },
          tooltip: {
            style: {
              color: '#fff',
              fontSize: '12px',
              padding: '8px'
            },
            formatter: function () {
              return self.$t('monitor.inCallSum2') + this.point.stackTotal + '<br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                this.series.name + self.$t('report.rate') + ':' + this.point.percentage.toFixed(1) + '%'
            },
            backgroundColor: 'rgba(50, 50, 50, 0.85)',
            borderColor: 'rgba(50, 50, 50, 0.85)'
          },
          colors: [
            '#eee',
            '#7ccdd1'
          ],
          plotOptions: {
            column: {
              stacking: 'normal'
            },
            series: {animation: false}
          },
          credits: {enabled: false},
          series: [
          ]
        },
        options24out: {
          chart: {
            type: 'column',
            animation: false
          },
          xAxis: {
            categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
          },
          yAxis: {
            gridLineColor: '#e6e6e6',
            allowDecimals: false,
            title: {
              text: ''
            }
          },
          title: {
            text: ''
          },
          legend: {
            enabled: false
          },
          tooltip: {
            style: {
              color: '#fff',
              fontSize: '12px',
              padding: '8px'
            },
            formatter: function () {
              return self.$t('monitor.outCallSum2') + this.point.stackTotal + '<br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                this.series.name + self.$t('report.rate') + ':' + this.point.percentage.toFixed(1) + '%'
            },
            userHTML: true,
            valueDecimals: 1,
            backgroundColor: 'rgba(50, 50, 50, 0.85)',
            borderColor: 'rgba(50, 50, 50, 0.85)'
          },
          colors: [
            '#eee',
            '#7ccdd1'
          ],
          plotOptions: {
            column: {
              stacking: 'normal'
            },
            series: {animation: false}
          },
          credits: {enabled: false},
          series: []
        },
        monitorHeartChart: {
          chart: {
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
              load: function () {
                // set up the updating of the chart each second
                self.heartChartLoaded = true
                activeLastPointToolip(this)
              }
            }
          },
          title: {
            text: ''
          },
          xAxis: {
            type: 'datetime',
            crosshair: {
              zIndex: 5,
              color: '#19bc9f',
              width: 1
            },
            gridLineColor: '#fff',
            minTickInterval: 15 * 60 * 1000,
            minRange: 60 * 60 * 6 * 1000,
            labels: {
              formatter: function () {
                return Highcharts.dateFormat('%H:%M', this.value)
              }
            }
          },
          yAxis: {
            title: {
              text: ''
            },
            allowDecimals: false,
            ceiling: 10,
            gridLineColor: '#fff',
            crosshair: {
              zIndex: 5,
              color: '#19bc9f',
              width: 1
            },
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          tooltip: {
            hideDelay: 80000
          },
          legend: {
            enabled: true
          },
          credits: {
            enabled: false
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: self.$t('public.callIn'),
            type: 'areaspline',
            color: '#a1bad0',
            fillColor: '#e1effa',
            animation: false,
            tooltip: {
              headerFormat: '',
              pointFormatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                  Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) + '<br/>' +
                  this.y
              }
            },
            events: {
              mouseOut: function () {
                let chart = this.chart
                activeLastPointToolip(chart)
              },
              legendItemClick: function (event) {
                return false
              }
            },
            data: []
          },
          {
            name: self.$t('monitor.maxCallInLimit'),
            type: 'areaspline',
            color: '#ed5770',
            fillColor: 'rgba(0,0,0,0)',
            animation: false,
            tooltip: {
              headerFormat: '',
              pointFormat: '{series.name}: <b>{point.y}</b><br/>'
            },
            events: {
              mouseOut: function () {
                let chart = this.chart
                activeLastPointToolip(chart)
              }
            },
            data: []
          }]
        },
        incomingChartData: [],
        maxCallsChartData: [],
        phoneServiceNos: []
      }
    },
    computed: {
      multiChannel () {
        let data = this.$store.state.monitor.table.MultiChannel
        let array = []
        for (var i in data) {
          let item = data[i]
          let name = item.name
          if (item.platform) {
            name = item.name + '(' + this.$t('monitor.' + item.platform) + ')'
          }
          let perInComplete = Math.round((item.closeSession / item.accessSession) * 100)
          if (item.accessSession === 0) {
            perInComplete = 100
          }
          let perDisplay = item.closeSession + '/' + item.accessSession
          array.push({_id: item._id, name, perDisplay, perInComplete})
        }
        return array
      },
      phoneAccountCalls () {
        let data = this.$store.state.cti.globalLet.phone_accountCalls
        let array = []
        for (let i in data) {
          let item = data[i]
          data[i].missIn = item.inCalls - item.inComplete
          data[i].missOut = item.outCalls - item.outComplete
          let inCallCpt, inCallLst
          let perInComplete = Math.round((item.inComplete / item.inCalls) * 100)
          inCallCpt = perInComplete
          inCallLst = (100 - perInComplete)
          if (item.inCalls === 0) {
            inCallCpt = 100
            inCallLst = 0
          }
          let outCallCpt, outCallLst
          let perOutComplete = Math.round((item.outComplete / item.outCalls) * 100)
          outCallCpt = perOutComplete
          outCallLst = (100 - perOutComplete)
          if (item.outCalls === 0) {
            outCallCpt = 100
            outCallLst = 0
          }
          Object.assign(data[i], {inCallCpt, inCallLst, outCallCpt, outCallLst})
          let inCallSumArray = item.inCallsPerHour.split(',')
          let inCallCptArray = item.inCompletePerHour.split(',')
          let inCallLstArray = []
          let outCallSumArray = item.outCallsPerHour.split(',')
          let outCallCptArray = item.outCompletePerHour.split(',')
          let outCallLstArray = []
          for (let j = 0; j < 24; j++) {
            inCallLstArray[j] = inCallSumArray[j] - inCallCptArray[j]
            inCallCptArray[j] = Number(inCallCptArray[j])
            outCallLstArray[j] = outCallSumArray[j] - outCallCptArray[j]
            outCallCptArray[j] = Number(outCallCptArray[j])
          }
          Object.assign(data[i], {inCallCptArray, inCallLstArray, outCallCptArray, outCallLstArray})
          array.push(data[i])
        }
        if (array.length !== 0) {
          // 有监控权限
          let pieData = this.generateCallinChart(array[0].inComplete, array[0].missIn, array[0].inType, array[0].inCalls)
          this.optionsCallin.series = pieData
          this.optionsCallout.series[0].data = [
            [this.$t('monitor.callOut') + array[0].outComplete, array[0].outCallCpt],
            [this.$t('monitor.noConnectedOutbound') + array[0].missOut, array[0].outCallLst]
          ]
          this.options24in.series = [
            {name: this.$t('monitor.unConnected'), data: array[0].inCallLstArray},
            {name: this.$t('monitor.connected'), data: array[0].inCallCptArray}
          ]
          this.options24out.series = [
            {name: this.$t('monitor.unConnected'), data: array[0].outCallLstArray},
            {name: this.$t('monitor.connected'), data: array[0].outCallCptArray}
          ]
          return array[0]
        } else {
          return {inCalls: 0, outCalls: 0}
        }
      },
      updateheartChart () {
        let pbx = this.$store.state.session.user.pbx
        let data = this.$store.state.monitor.table.phone_heartBeat
        return data[pbx]
      }
    },
    components: {
      affix,
      agentTop10
    },
    methods: {
      phoneServiceNosData () {
        let data = window.phone_serviceNos
        let array = []
        for (var i in data) {
          let item = data[i]
          let serviceNo = item.serviceNo
          if (item.displayName !== '') {
            serviceNo = item.serviceNo + '(' + item.displayName + ')'
          }
          let perInComplete = Math.round((item.inComplete / item.inCalls) * 100)
          if (item.inCalls === 0) {
            perInComplete = 100
          }
          let perDisplay = item.inComplete + '/' + item.inCalls
          array.push({serviceNo, perDisplay, perInComplete})
        }
        this.phoneServiceNos = array
      },
      generateCallinData (name, num, color, sum) {
        let percent = 0
        if (sum !== 0) {
          percent = num * 100 / sum
        }
        if (sum === 0 && name === 'callIncoming') {
          percent = 100
        }
        return {name: this.$t('monitor.' + name) + num, y: percent, color: color}
      },
      generateCallinChart (inComplete, missIn, inType, sum) {
        let colorIn = ['#65c3df', '#a252b5']
        let colorMiss = ['#b37cd9', '#d398e8', '#b490f4', '#9c67c3', '#c498e5', '#b572e3']
        // 内圆数据
        let summaryData = []
        // 外圆数据
        let detailData = []
        // 呼入接通
        summaryData.push(this.generateCallinData('callIncoming', inComplete, colorIn[0], sum))
        detailData.push(this.generateCallinData('callIncoming', inComplete, colorIn[0], sum))
        // 呼入未接通
        summaryData.push(this.generateCallinData('noConnectedIncoming', missIn, colorIn[1], sum))
        let n = 0
        for (let i in inType) {
          detailData.push(this.generateCallinData(i, inType[i], colorMiss[n], sum))
          n++
        }
        let summaryPie = {
          name: 'summary',
          data: summaryData,
          size: '60%',
          dataLabels: {
            formatter: function () {
              // 大于1则显示
              return this.y === 0 ? '<b>' + this.point.name + ':</b> ' + this.y.toFixed(1) + '%' : null
            },
            color: '#4e4e4e'
          }
        }
        let detailPie = {
          name: 'detail',
          data: detailData,
          size: '70%',
          innerSize: '60%',
          dataLabels: {
            formatter: function () {
              // 大于1则显示
              return this.y > 0 ? '<b>' + this.point.name + ':</b> ' + this.y.toFixed(1) + '%' : null
            },
            color: '#4e4e4e'
          }
        }
        return [summaryPie, detailPie]
      },
      generateHeartChart () {
//        let that = this
        this.$store.dispatch('initHeartBeat').then((res) => {
          if (!res.Succeed) {
            return
          }
          // 每分钟呼入数
          let incomingData = res.IncomingData
          // 呼入并发
          let maxInComingCalls = res.MaxInComingCalls
          this.heartChartData.maxInComingCalls = maxInComingCalls
          this.heartChartData.incomingData = res.ctIncomingData
          this.heartChartData.incomingCompleteData = res.ctIncomingCompleteData
          this.heartChartData.queueData = res.ctQueueData
          this.heartChartData.outboundData = res.ctOutboundData
          this.heartChartData.outboundCompleteData = res.ctOutboundCompleteData
          this.incomingChartData = []
          this.maxCallsChartData = []
          // 数据补足补0
          if (incomingData.length < 360) {
            let item = incomingData[0].split(':')
            let time = parseInt(item[0])
            for (let i = 0; i < 360 - incomingData.length; i++) {
              this.incomingChartData.push({
                x: time - 60000,
                y: 0
              })
              this.maxCallsChartData.push({
                x: time - 60000,
                y: maxInComingCalls
              })
            }
          }
          for (let i = 0; i < incomingData.length; i++) {
            let item = incomingData[i].split(':')
            let time = parseInt(item[0])
            let num = parseInt(item[1])
            // 取最大的呼入值
            if (item[1] >= this.currentMaxY.num) {
              this.currentMaxY = {num, time}
            }
            this.incomingChartData.push({
              x: time,
              y: num
            })
            this.maxCallsChartData.push({
              x: time,
              y: maxInComingCalls
            })
          }
          this.monitorHeartChart.series[0].data = this.incomingChartData
          this.monitorHeartChart.series[1].data = this.maxCallsChartData
          this.monitorHeartChart.yAxis.ceiling = this.currentMaxY.num + 10
        })
      },
      maxCallNum (data, chart) {
        let maxCall = data.split(':')
        let time = parseInt(maxCall[0])
        let num = parseInt(maxCall[1])
        if (num >= this.currentMaxY.num) {
          this.currentMaxY = {num, time}
        }
      }
    },
    watch: {
      updateheartChart: {
        deep: true,
        handler (newV) {
          let data = newV
          let chart = this.heartChartLoaded
          if (chart && data) {
            let x = parseInt(data.incomingData.split(':')[0]) // current time
            let y = parseInt(data.incomingData.split(':')[1])
//            series[0].addPoint([x, y], false, true)
//            series[1].addPoint([x, this.heartChartData.maxInComingCalls], false, true)
            this.incomingChartData.push({x, y})
            this.maxCallsChartData.push({x, y: this.heartChartData.maxInComingCalls})
            this.incomingChartData.shift()
            this.maxCallsChartData.shift()
            if (y >= this.currentMaxY.num) {
              this.currentMaxY = {num: y, time: x}
            }
            this.monitorHeartChart.series[0].data = this.incomingChartData
            this.monitorHeartChart.series[1].data = this.maxCallsChartData
            this.monitorHeartChart.yAxis.ceiling = this.currentMaxY.num + 10
            this.heartChartData.incomingData = y
            this.heartChartData.incomingCompleteData = data.incomingCompleteData
            this.heartChartData.queueData = data.queueData
            this.heartChartData.outboundData = data.outboundData
            this.heartChartData.outboundCompleteData = data.outboundCompleteData
          }
        }
      },
      '$store.state.cti.serviceNoChange.random' () {
        this.phoneServiceNosData()
      }
    },
    created () {
      this.generateHeartChart()
      this.phoneServiceNosData()
      if (this.$store.state.monitor.moduleOpen.webchat) {
      } else {
        this.$store.commit('monitor/MONITOR_MODULE_OPEN', {type: 'webchat', status: true})
        let p1 = this.$store.dispatch('imMonitorInit', {})
        let p2 = this.$store.dispatch('getCache', {type: 'mailQueues'})
        let p3 = this.$store.dispatch('getCache', {type: 'onlineChannelAgent'})
        Promise.all([p1, p2, p3]).then(() => {
        })
      }
    },
    activated () {
      this.reload = false
      this.$nextTick(() => {
        this.reload = true
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .a
    color #989898
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .channel
  .server
    padding-left 20px
  .el-progress-bar__inner
    color #d398ea
  .all
    color #989898
  .el-col-14
    margin-top 5px
  .wrap
    padding 0 25px 10px
    overflow auto
    .title
      color $cf-gray0
      margin 28px 0 18px 0
      font-weight normal
      position relative
      .sign
        position relative
        width 12px
        height 12px
        background #7ccdd1
        display inline-block
        z-index 3
      .text
        position relative
        display inline-block
        padding 0 8px 0 10px
        background $cf-white
        z-index 3
      &:after
        content ""
        display inline-block
        width 100%
        left 0
        border-bottom 1px dashed $cf-level4
        position absolute
        top 12px
  .clear10
    clear both
    height 10px
  .circle
    display inline-block
    height 7px
    width 28px
    margin 6px 10px 0 0
  .ratio
    margin-left 30px
    margin-right 78px
  .finish
    margin-right 50px
  .color-complete
    background #7acdd1
  .listen
    background #d398ea
  .color-sum
    background #e5e9f2
  .chart-tip
    padding-right 30px
    color #b6b6b6
  .color-complete24
    background #7ccdd1
  .callsum
  .todaycallsum
    text-align center
    padding-bottom: 10px
  .callsum-wrap
    position relative
  .heart-wrap
    padding 0 300px
    display flex
    justify-content space-between
    text-align center
  .heart-num
    display block
    font-size 26px
    padding-bottom 6px
  .heart-name
    font-size 14px
  .heart-num.active
    color $c-main
  .heart-name.active
    color $c-main
  .tips
    padding-top 20px
    color $c-prompt
</style>
